<template>
  <div class="Navigation">
    <div class="logo">
      <img src="@/assets/logo.svg" height="40">
    </div>
    <div class="links">
      <router-link class="link" to="/">
        Мероприятия
      </router-link>
      <router-link class="link" to="/about">
        О нас
      </router-link>
      <router-link class="link" to="/events">
        Мои мероприятия
      </router-link>
      <router-link class="link" to="/cabinet">
        Кабинет
      </router-link>
    </div>
    <div class="contacts">
      <span>Наши контакты</span>
      <br>
      +7 (999) 000 0000
    </div>
    <div class="login">
      <button type="button" @click="$emit('login')" class="btn btn-outline-primary">{{ props.login}}</button>
    </div>
  </div>
</template>
<script setup>
import Button from "primevue/button";
const props = defineProps({
  login: {
    default: "Вход"
  }
})


</script>
<style scoped lang="scss">
.Navigation {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  grid-gap: 25px;
  padding: 0px 25px;
  position: sticky;
  top: 0;
  box-shadow: 0px -1px 4px black;
  margin-bottom: 10px;
  z-index: 4;
  background: white;

  .links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-gap: 25px;

    .link {
      text-decoration: none;
    }
  }

  .contacts {
    span {
      font-size: large;
      font-weight: bold;
    }
  }
}
</style>